<template>
  <div :style="{height:app_height}">
    <div>
      <nut-navbar @on-click-back="back" @on-click-more="more" >明细信息</nut-navbar>
      <nut-actionsheet :is-visible="isVisible" @close="switchActionSheet">
        <div slot="custom" class="custom-wrap">
          <nut-textinput v-model="querParam.cmobile" :clear-btn="false" :disabled="false" placeholder="客户手机" />
          <nut-row>
            <nut-col :span="4">
              <div class="flex-content">类型</div>
            </nut-col>
            <nut-col :span="20">
              <nut-radiogroup v-model="querParam.ctype">
                <nut-radio label="ALL">全部</nut-radio>
                <nut-radio label="CLUE">线索</nut-radio>
                <nut-radio label="POTENTIAL">潜客</nut-radio>
                <nut-radio label="DEAL">成交</nut-radio>
              </nut-radiogroup>
            </nut-col>
          </nut-row>
          <nut-row>
            <nut-col :span="6">
              <div class="flex-content">添加微信</div>
            </nut-col>
            <nut-col :span="18">
              <nut-radiogroup v-model="querParam.isAddwx">
                <nut-radio label="ALL">全部</nut-radio>
                <nut-radio label="Y">是</nut-radio>
                <nut-radio label="N">否</nut-radio>
              </nut-radiogroup>
            </nut-col>
          </nut-row>
          <nut-row>
            <nut-col :span="6">
              <div class="flex-content">是否建群</div>
            </nut-col>
            <nut-col :span="18">
              <nut-radiogroup v-model="querParam.isAddQun">
                <nut-radio label="ALL">全部</nut-radio>
                <nut-radio label="Y">是</nut-radio>
                <nut-radio label="N">否</nut-radio>
              </nut-radiogroup>
            </nut-col>
          </nut-row>
        </div>
      </nut-actionsheet>
    </div>
    <div class="my-content">
      <div class="my-content-head">
        <nut-row>
          <nut-col :span="5">
            <div class="flex-content">客户名称</div>
          </nut-col>
          <nut-col :span="7">
            <div class="flex-content">客户手机号</div>
          </nut-col>
          <nut-col :span="4">
            <div class="flex-content">类型</div>
          </nut-col>
          <nut-col :span="4">
            <div class="flex-content">添加微信</div>
          </nut-col>
          <nut-col :span="4">
            <div class="flex-content">是否建群</div>
          </nut-col>
        </nut-row>
      </div>
      <div :style="{height:sc_height}" class="my-content-body">
        <nut-scroller
          :is-un-more="isUnMore1"
          :is-loading="isLoading1"
          :type="'vertical'"
          @loadMore="loadMoreVert"
          @pulldown="pulldown"
        >
          <div slot="list" class="nut-vert-list-panel">
            <div v-for="(item, index) of listData" :key="index" class="nut-vert-list-item">
              <div class="nut-scroller-item-info">
                <nut-row>
                  <nut-col :span="5">
                    <div class="flex-content">{{ item.name }}</div>
                  </nut-col>
                  <nut-col :span="7">
                    <div class="flex-content">{{ item.mobile }}</div>
                  </nut-col>
                  <nut-col :span="4">
                    <div class="flex-content">{{ item.type }}</div>
                  </nut-col>
                  <nut-col :span="4">
                    <div class="flex-content">{{ item.iswx }}</div>
                  </nut-col>
                  <nut-col :span="4">
                    <div class="flex-content">{{ item.iswxgroup }}</div>
                  </nut-col>
                </nut-row>
              </div>
            </div>
          </div>
        </nut-scroller>
      </div>
    </div>
  </div>
</template>

<script>
import {
  querySalesAdvisorCustomDetail
} from '@/api/admin/org/weChat/wechatReportQuery'
import _ from 'lodash'
export default {
  name: 'SalesAdvisorCustomDetail',
  data() {
    return {
      app_height: `${document.body.offsetHeight}px`,
      sc_height: `${document.body.offsetHeight - 90}px`,
      isVisible: false,

      isUnMore1: false,
      isLoading1: false,
      page: 1,
      pageSize: 10,

      querParam: {
        user_id: '',
        startDate: '',
        endDate: '',
        cmobile: '',
        ctype: 'ALL',
        isAddwx: 'ALL',
        isAddQun: 'ALL'
      },

      listData: [],
      pdata: {
        mobile: '',
        name: '',
        type: '',
        iswx: '',
        iswxgroup: ''
      }
    }
  },
  mounted() {
    this.initParams()
    this.pulldown()
  },
  methods: {
    initParams() {
      this.querParam.user_id = sessionStorage.getItem('WC_USERID')
      if (this.$route.params.ctype) {
        this.querParam.ctype = this.$route.params.ctype
        sessionStorage.setItem('ctype', this.$route.params.ctype)
      } else {
        this.querParam.ctype = sessionStorage.getItem('ctype')
      }
      if (this.$route.params.date) {
        this.querParam.startDate = this.$route.params.date[0]
        sessionStorage.setItem('startDate', this.$route.params.date[0])
      } else {
        this.querParam.startDate = sessionStorage.getItem('startDate')
      }
      if (this.$route.params.date) {
        this.querParam.endDate = this.$route.params.date[1]
        sessionStorage.setItem('endDate', this.$route.params.date[1])
      } else {
        this.querParam.endDate = sessionStorage.getItem('endDate')
      }
    },
    back() {
      this.$router.go(-1)
    },
    more() {
      this.isVisible = true
    },
    switchActionSheet() {
      this.isVisible = !this.isVisible
      this.pulldown()
    },

    loadMoreVert() {
      const that = this
      if (!that.isUnMore1) {
        that.isLoading1 = true
        querySalesAdvisorCustomDetail(_.extend(this.querParam, { page: that.page, pageSize: that.pageSize })).then(res => {
          if (res.length < that.pageSize) {
            that.isUnMore1 = true
          } else {
            that.isUnMore1 = false
          }
          that.isLoading1 = false
          that.page = ++that.page
          res.forEach((item) => {
            that.listData.push(item)
          })
        }).catch(err => {
          that.isLoading1 = false
          that.isUnMore1 = false
        })
      }
    },
    pulldown() {
      const that = this
      that.page = 1
      that.listData = []
      that.isLoading1 = true
      querySalesAdvisorCustomDetail(_.extend(this.querParam, { page: that.page, pageSize: that.pageSize })).then(res => {
        if (res.length < that.pageSize) {
          that.isUnMore1 = true
        } else {
          that.isUnMore1 = false
        }
        that.isLoading1 = false
        that.page = 2
        that.listData = res
      }).catch(err => {
        that.isLoading1 = false
        that.isUnMore1 = false
      })
    }
  }
}
</script>

<style lang="scss">
.custom-wrap{
  padding: 10px;
  .nut-textinput{
    margin: 15px 0;
  }
  .nut-row-flex-nowrap{
    margin: 15px 0;
  }
}
.my-content{
  padding: 0px 10px 10px 10px;
  .my-content-head{
    .nut-row-flex-nowrap{
      height: 40px;
      background-color: #f6f6f6;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
    }
  }
  .my-content-body{
    .nut-row-flex-nowrap{
      font-size: 15px;
      font-weight: 400;
      text-align: center;
    }
    .nut-vert-list-item{
      border-bottom: 1px solid #dcdcdc;
      margin-top: 10px;
      padding-bottom: 10px;
    }
  }
}
</style>
